
<template>
  <div>
    <div class="course-video" id="course">
      <div class="player-pack">
        <div class="player" ref="live"></div>
      </div>
    </div>
    <div class="course-info clearfix">
      <div class="course-title">{{this.$store.state.courseDetail.courseDetail.courseName}}</div>
      <div
        class="user-collect"
        v-bind:class="{ 'user-collect-seleted': this.$store.state.courseDetail.courseDetail.curUserCollect }"
      ></div>
      <div class="course-group">团队: {{this.$store.state.courseDetail.courseDetail.courseGroup}}</div>
      <div class="course-author">作者: {{this.$store.state.courseDetail.courseDetail.courseAuthor}}</div>
      <div
        class="course-difficulty"
      >难度: {{this.$store.state.courseDetail.courseDetail.courseDiffculty}}</div>
      <div class="course-rating">评分: {{this.$store.state.courseDetail.courseDetail.courseRating}}</div>
      <div
        class="course-duration"
      >时长: {{this.$store.state.courseDetail.courseDetail.courseDuration}}</div>
    </div>
    <div class="course-comments">
      <div class="navigation">用户评论</div>
      <div class="content">
        <div
          class="comment"
          v-for="comment in this.$store.state.courseDetail.courseDetail.userComments"
          :key="comment.commentId"
        >
          <div class="user-img">
            <i class="img"/>
          </div>
          <div class="user-name">
            <span>{{comment.username}}</span>
            - {{comment.time}}
          </div>
          <div class="user-comment">{{comment.comment}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TPConst from "@/common/tp.const.js";

export default {
  data() {
    return {
      player: Function,
      videoInfo: {}
    };
  },
  methods: {
    baiduMp4(mp4Url, imgUrl) {
      this.player = this.$cyberplayer(this.$refs.live).setup({
        // this.player = this.$cyberplayer(this.$refs.live).setup({
        width: "60vw", // 宽度，也可以支持百分比(不过父元素宽度要有)
        height: 568, // 高度，也可以支持百分比
        title: "学习平台 - 教学", // 标题
        file: mp4Url, // 播放地址
        image: imgUrl, // 预览图
        autostart: true, // 是否自动播放
        stretching: "uniform", // 拉伸设置
        repeat: false, // 是否重复播放
        volume: 80, // 音量
        controls: true, // controlbar是否显示
        starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播
        logo: {
          // logo设置
          linktarget: "_blank",
          margin: 8,
          hide: false,
          position: "top-right", // 位置
          file: "./img/logo.png" // 图片地址
        },
        ak: "43c60bb1b7cf4f5c8bb11607b1bd7a93" // accessKey
      });
      // this.playComplete();
    }
  },
  mounted() {
    var self = this;
    // TODO: need packaged & redefined interface.
    this.$http
      .get("http://npm.paic.com.cn:7070/mock/164/tp/api/course/10001")
      .then(res => {
        self.$store.commit("updateCourseDetail", res.data);
        this.baiduMp4(
          this.$store.state.courseDetail.courseDetail.courseUrl,
          TPConst.VideoImageUrl
        );
      })
      .catch(error => {
        window.console.error(error);
      });
  },
  beforeDestroy() {
    this.player.remove();
  },
  destroyed() {
    this.$off();
    this.$destroy();
  }
};
</script>

<style scoped lang="scss" >
@import "./course-detail.scss";
</style>